<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 让插槽内容能够访问子组件中才有的数据是很有用 -->
        <current-user>
            <!-- 将包含所有插槽 prop 的对象命名为 slotProps 相当与data的数据 -->
            <template v-slot:default="slotProps">
                {{slotProps.user.lastName}}
            </template>
            <!-- 结构赋值 别名只能在这里使用 -->
            <template v-slot:foot="{user:person}">
                {{person}}
            </template>
            <template v-slot:passwd="{pwd}">
                {{pwd}}
            </template>
        </current-user>
    </div>

    <script>
        Vue.component("current-user", {
            data(){
                return{
                    user:{firstName:"姓",lastName:"名"},
                    foot:{footName:'底部名称'},
                    pwd:123
                }
            },
// 绑定在 <slot> 元素上的 attribute 被称为插槽 prop
    // 现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：
    // 插槽内只能获取
            template: `
            <div>
                <slot v-bind:user="user">
                    <div>{{user}}</div>
                </slot>
                <slot v-bind:user="user.firstName">
                    <div>{{user}}</div>
                </slot>
                <slot v-bind:user="user.lastName">
                    <div>{{user}}</div>
                </slot>
                <div>-----------------------------</div>
                <slot name="foot" :user="user">
                    <div>{{user}}</div>
                </slot>
                <div>-----------------------------</div>
                <slot name="passwd" :pwd="pwd">
                    <div>{{pwd}}</div>
                </slot>
            </div>
            `,
        });

        var app = new Vue({
            el: "#app",
        });
    </script>
</body>

</html>